<template>
	<el-dialog title="" visible :show-close="false" :modal-append-to-body="false" class="wrap" >
		 <div class="bt">通知详情</div>
		<i class="el-icon-close close" @click="cancel" style="color: white;z-index:10;"></i>
		<el-form label-width="100px" class="form">
			<div class="all" style="width: 100%;float: left;">
			<div class="left" style="width: 50%;float: left;">
			<div class="aa">
				<span>通知主题：</span>
				  <input v-model="form.bt" :readonly="true" icon="info" class="select-block"></input>
			</div>
			<div class="aa">
				<span>发送人数：</span>
				  <input v-model="form.fsrs" :readonly="true" icon="info" class="select-block"></input>
			</div>
			</div>
			
			<div class="right" style="width: 50%;float: right;">
		    <div class="aa">
				<span>预计发送时间：</span>
				  <input v-model="form.yjfssj" :readonly="true" icon="info" class="select-block"></input>
			</div>
			<div class="aa">
				<span>阅读人数：</span>
				  <input v-model="form.ydrs" :readonly="true" icon="info" class="select-block"></input>
			</div>
			</div>
			</div>
			<div class="aa" style="float: left;width: 100%;margin-bottom: 0px;">
			<el-form-item label="消息类型">
				  <el-input v-model="form.isqzmc"  :readonly='true' icon="info" class="select-block1"></el-input>
			</el-form-item>
			</div>
			<div class="aa" style="float: left;width: 100%;margin-bottom: 0px;">
			<el-form-item label="通知内容">
				  <el-input v-model="form.nr" type="textarea" :rows="2" :readonly='true' icon="info" class="select-block1"></el-input>
			</el-form-item>
			</div>
			
			<el-tabs v-model="activeName"  style="text-align: center;float: left;width: 100%;">
		<!--<el-tab-pane label="" name="first">-->
			      <el-table :data="dataList" stripe style="width: 100%" >
					<el-table-column prop="xsmc" label="通知人" width="80"></el-table-column>

					<el-table-column prop="dt" label="发送时间" width="160"></el-table-column>

					<el-table-column prop="readtime" label="阅读时间" width="160"></el-table-column>
					
					<el-table-column prop="nr" label="通知内容"></el-table-column><br />
					

				  </el-table>
			    </el-tab-pane>
	    </el-tabs>
		</el-form>
		<el-button type="primary" class="submit" @click="cancel">确定</el-button>
	</el-dialog>
</template>

<script type="text/javascript">
	import qs from 'qs'
	export default {
		props: ['params'],
		data() {
			return {
				activeName: 'first',
				form: {
					isqzmc:'',
					bt :'',
					nr :'',
					dt :'',
					fsrs:'',
					ydrs:'',
					fslx :'',
					bjmc :'',
					yjfssj:'',
					id: ''
				},
				dataList: [],
			}
		},
		created() {
           this.form.id=this.params.row.id;
			this.loadinfo();
			this.bjxx();
		},
		methods: {
			loadinfo(){
				
				 var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
             var params2 = qs.stringify({
                      xxid:logininfo.xxid,
							 yhid:logininfo.id,
							 id:this.form.id
               })
             //执行
                 this.axios.post(this.$store.state.api + 'notice/info',  params2 )
                 .then(res => {
                 this.form=res.data.data
                 }).catch(res => {
					this.$message.warning("服务器异常");
			 				this.$emit('close', { type: 'info', cancel: true });
				})			
			},
			bjxx() {
				var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
             var params2 = qs.stringify({
                      noticeid:this.form.id,
					  yhid:this.form.id,
                      xxid:logininfo.xxid,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'noticelist/getlist',  params2 )
                 .then(res => {
					let data = res.data.data;
						let list = data.list;
						this.dataList = list;
					this.searchLoading = false;
                 }).catch(res => {
					 console.log(res)
                  this.searchLoading = false;
				})	
			},
			cancel() {
				this.$emit('close', { type: 'info', cancel: true })
			}
		}
	}
</script>

<style lang="less" scoped>
.wrap {
	text-align: center;
}
.bt{
		position: absolute;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		left: 0;
		background: #50BFFF;
		color:white;
		text-align:left;
		line-height: 50px;
		font-size: 17px;
		padding-left: 15px;
	}

.form {
	text-align: left;
	margin-top: 20px;
}
 .input {
					width: 300px;
					display: inline-block;
			}
.select-block1 {
	float: left;
	width: 85%;
}
	.aa{
		margin-bottom: 15px;
	}
	.select-block {
		width: 50%;
		border: none;
		outline: none;
		border-bottom: 1px solid#CCCCCC;
		font-size: 16px;
	}

.submit {
	width: 120px;
	margin-top: 8px;
}
</style>
